<template>
  <div class="CardDetails">
    <section class="section4">
      <div class="container">
        <div
          class="row row-cols-1 row-cols-lg-2 d-flex justify-content-center aligin-items-center"
        >
          <div class="col position-relative">
            <img
              class="img-fluid rounded-3 h-100 teacherImg"
              :src="$route.query.src"
              alt=""
            />
            <div class="num-tips position-absolute rounded-3 ">
              <div class="row">
                <div class="col-3">
                  <i
                    class="bi bi-person-badge"
                    style="font-size: 4em; color:#fff;"
                  ></i>
                </div>
                <div
                  class="col-9 d-flex flex-column justify-content-evenly align-items-start"
                >
                  <strong style="color: #fff; font-size:1.5em;">{{
                    $route.query.name
                  }}</strong>
                  <p style="color:#fff;">福州理工学院</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="row">
              <div
                class="title d-flex flex-column justify-content-center align-items-start"
              >
                <small class="d-inline-block fs-6 mt-2 px-1 py-1  ">{{
                  $route.query.time | formatDate
                }}</small>
                <h1 style="line-height: 1.5;">
                  {{ $route.query.saying }}
                </h1>
                <div class="section-divider rounded-pill my-4"></div>
              </div>
            </div>
            <div class="row">
              <h4 class="my-3">
                主要事迹
              </h4>
              <p class="my-3">
                {{ $route.query.desc }}
              </p>
              <p class="my-3" v-html="$route.query.mainStory"></p>
              <a
                href="#"
                @click="goHome"
                class="btn btn-primary btn-lg w-25 mt-2 "
                style="font-size: 1.1em;"
                >返回</a
              >
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import formatDateTimes from "@/assets/Tools/date2.js";
export default {
  filters: {
    formatDate(val) {
      return formatDateTimes.formatDateTime(val);
    },
  },
  methods: {
    goHome() {
      this.$router.push({
        path: "/home",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.CardDetails {
  background: url(https://cdn.syjun.vip/background.png) no-repeat 100% 100%;
  .card {
    background: transparent;
    border: none !important;
    img {
      margin-top: 21%;
      max-height: 700px;
      padding-right: 30px;
      margin-right: 100px;
    }
  }
}
.section4 .num-tips {
  bottom: 5%;
  left: -5%;
  width: 16.875rem;
  height: 5.9375rem;
  background-color: #4bb0f7;
}
p {
  text-indent: 2em;
}
</style>
